/**
 * Ant Design Pro v4 use `@ant-design/pro-layout` to handle Layout.
 * You can view component api by:
 * https://github.com/ant-design/ant-design-pro-layout
 */
import ProLayout from '@ant-design/pro-layout';
import { Icon, Divider } from 'antd';
import React, { useState } from 'react';
import Link from 'umi/link';
import { connect } from 'dva';
import { formatMessage } from 'umi-plugin-react/locale';
import RightContent from '@/components/GlobalHeader/RightContent';
import Resize from '@/components/ReSize/ReSize';
import Authorized from '@/utils/Authorized';
import logo from '../assets/logo.svg';

/**
 * use Authorized check all menu item
 */
const menuDataRender = menuList =>
  menuList.map(item => {
    const localItem = {
      ...item,
      icon: <Icon type={item.icon} />,
      children: item.children ? menuDataRender(item.children) : []
    };
    return Authorized.check(item.authority, localItem, null);
  });

const footerRender = () => (
  <div
    style={{
      padding: '0px 24px 24px',
      textAlign: 'center'
    }}
  >
    天笑科技
  </div>
);

const BasicLayout = props => {
  const { dispatch, children, settings } = props;
  const homeRoute = [
    {
      path: '#/',
      breadcrumbName: formatMessage({
        id: 'menu.home',
        defaultMessage: 'Home'
      })
    }
  ];

  useState(() => {
    if (dispatch) {
      dispatch({
        type: 'settings/getSetting'
      });
    }
  });

  const handleMenuCollapse = payload => {
    dispatch({
      type: 'global/changeLayoutCollapsed',
      payload
    });
  };

  const collapsedButtonRender = collapsed => {
    const icon = collapsed ? <Icon type="menu-unfold" /> : <Icon type="menu-fold" />;
    const dom = (
      <span
        className="ant-pro-global-header-trigger"
        onClick={() => {
          handleMenuCollapse(!collapsed);
        }}
      >
        {icon}
      </span>
    );
    return dom;
  };

  const topMenuRender = () => {
    const dom = (
      <div style={{ flex: '1 1 0%' }}>
        {/* <Divider type="vertical" /> */}
        {/* show some thing */}
      </div>
    );

    return dom;
  };

  const rightContentRender = headerProps => <RightContent {...headerProps} />;

  const headerRender = headerProps => {
    const { collapsed } = headerProps;
    const collapsedButton = collapsedButtonRender(collapsed);
    const topmenu = topMenuRender(headerProps);
    const rightCon = rightContentRender(headerProps);
    return (
      <div className="ant-pro-global-header">
        {collapsedButton}
        {topmenu}
        {rightCon}
      </div>
    );
  };

  const onResize = payload =>
    dispatch &&
    dispatch({
      type: 'global/changeWidth',
      payload
    });

  const breadcrumbRender = (routers = []) => {
    const $routers = routers.map(route => {
      const newRoute = { ...route };
      newRoute.path = route.component ? `#${route.path}${props.location.search}` : undefined;
      return newRoute;
    });
    return homeRoute.concat($routers);
  };

  const renderMenuItem = (menuItemProps, defaultDom) => {
    if (menuItemProps.isUrl || menuItemProps.children) {
      return defaultDom;
    }
    return <Link to={menuItemProps.path}>{defaultDom}</Link>;
  };

  return (
    <Resize onRsize={onResize}>
      <ProLayout
        logo={logo}
        onCollapse={handleMenuCollapse}
        // collapsedButtonRender={collapsedButtonRender}
        // rightContentRender={rightContentRender}
        headerRender={headerRender}
        menuItemRender={renderMenuItem}
        breadcrumbRender={breadcrumbRender}
        footerRender={footerRender}
        menuDataRender={menuDataRender}
        formatMessage={formatMessage}
        {...props}
        {...settings}
      >
        {children}
      </ProLayout>
    </Resize>
  );
};

export default connect(({ global, settings }) => ({
  collapsed: global.collapsed,
  settings
}))(BasicLayout);
